<script setup lang="ts">
import type { CascaderProps } from 'ant-design-vue';

import { onMounted, ref } from 'vue';

import { Cascader } from 'ant-design-vue';

import { loadRegionByParentId } from './region-api';

defineOptions({
  name: 'RegionCascader',
});

const options = ref<CascaderProps['options']>([]);
onMounted(async () => {
  const regions = await loadRegionByParentId('0');
  options.value = regions;
});
const loadData = async (selectedOptions: any) => {
  const targetOption = selectedOptions[selectedOptions.length - 1];
  targetOption.loading = true;
  const children = await loadRegionByParentId(targetOption.value);
  targetOption.loading = false;
  targetOption.children = [...children];
  options.value = [...options.value];
};
</script>
<template>
  <Cascader
    :allow-clear="true"
    :load-data="loadData"
    :options="options"
    :placeholder="$t('placeholder.select')"
    change-on-select
  />
</template>
